import { PageContainer, ProTable } from "@ant-design/pro-components";
import { Button, Modal, Input, Form, Checkbox, Space } from "antd";
import { connect } from "umi";
import { namespace } from "../configFile";
import { useEffect, useState, useRef } from "react";
import AddModal from "./VenueAddModal";
import { PlusOutlined } from "@ant-design/icons";

const Page = (props) => {
  const { dispatch, submitLoading } = props;
  const addRef = useRef(null);
  const [open, setOpen] = useState(false);
  const [row, setRow] = useState(null);
  const [form] = Form.useForm();

  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
    });
  }, []);

  const editInfo = (params) => {
    setRow(params);
    addRef.current.setOpen(true);
    // dispatch({
    //     type: `${namespace}/queryItemInfo`,
    //     params,
    //     callback: (res) => {
    //         form.setFieldsValue({ ...res })
    //         setOpen(true)
    //     }
    // })
  };

  const toggleState = () => {
    dispatch({
      type: `${namespace}/toggleState`,
      params,
      callback: (res) => {
        form.setFieldsValue({ ...res });
        setOpen(true);
      },
    });
  };

  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    render: (_, record) => {
      return (
        <Space>
          <Button type="link" onClick={() => editInfo(record)}>
            编辑
          </Button>
          <Button type="link" onClick={() => toggleState()}>
            删除
          </Button>
        </Space>
      );
    },
  };

  const submitForm = async () => {
    const res = await form.validateFields();
    if (res) {
      dispatch({
        type: `${namespace}/submitItem`,
        params: res,
      });
    }
    console.log(res);
  };

  return (
    <>
      <ProTable
        toolBarRender={() => [
          <Button
          icon={<PlusOutlined />}
            type="primary"
            onClick={() => {
              addRef.current.setOpen(true);
            }}
          >
            新增
          </Button>,
        ]}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params,
          });
        }}
        pagination={{
          showSizeChanger: true,
        }}
        scroll={{ x: 1500 }}
        columns={venueColumns({ operate })}
      />
      <AddModal ref={addRef} row={row} />
    </>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
